<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/lib/haha/core/start.js"></script>
    <link rel="stylesheet" href="/CSS/login1.css">
</head>

<body>
    <div class="container">
        <!-- 左侧图片 -->
        <div class="left"></div>
        <!-- 右侧登录框 -->
        <div class="right">
            <div class="right_box">
                <img src='' alt="">
                <p> 中国石油西南油气田公司-科技信息资源网</p>
                <div class="form">
                    <div class="oneBox">
                        <label for="userName" class="label1">用户名:</label>
                        <img src="/image/login1/user.png" class="img">
                        <input placeholder="请输入您的用户名..." id='userName' type="text" autoComplete="off">
                    </div>
                    <div class="oneBox">
                        <label for="passWord" class="label1">密码:</label>
                        <img src="/image/login1/password.png" class="img">
                        <i class="eye"></i>
                        <input placeholder="请输入您的密码..." id='passWord' autocomplete="off" type="text"
                            onfocus=changeText(this) oninput=changeText(this)>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <span id="registBtn" class="toRegist">去注册</span>
                    <button class="borderNone" id='loginBtn'>登录</button>
                </div>
            </div>
        </div>
    </div>

    <div id='regist' style="display: none;"></div>
    <div id='updatePassword' style="display: none;"></div>
    <script type="text/javascript" src="/lib/layer-v3.1.1/layer/layer.js"></script>
    <script>
        shared.useLayout("showLine");
        var popbox;
        var popbox1;
        var flag = false;
        //onfocus oninput
        function changeText(e) {
            if ($(e).val()) {
                flag ? $(e).attr('type', 'text') : $(e).attr('type', 'password');
            } else {
                $(e).attr('type', 'text')
            }
        }
        $(function () {
            // 注册
            $('#registBtn').click(function (e) {
                popbox1 = layer.open({
                    title: '注册',
                    icon: 1,
                    type: 1,
                    anim: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['400px', '480px'], //宽高
                    content: $('#regist'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            })
            // 获取用户名，密码
            $('#loginBtn').off().on('click', function () {
                login();
            });
            $("body").keydown(function () {
                if (event.keyCode == "13") {
                    login();
                }
            })
            function login() {
                if (!$('#userName').val()) {
                    layer.msg('请输入用户名!');
                    return;
                }
                if (!$('#passWord').val()) {
                    layer.msg('请输入密码!');
                    return;
                }
                shared.ajaxPost(config.login, { id: $('#userName').val(), pwd: $('#passWord').val() }, function callback(res) {
                    if (Number(res) == 1) {
                        popbox = layer.open({
                            title: '修改密码',
                            icon: 1,
                            type: 1,
                            anim: 2,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['400px', '420px'], //宽高
                            content: $('#updatePassword'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                    }
                    else {
                        layer.msg('登录成功!!!');
                        //存储用户信息
                        shared.setCookie('token', res.token);
                        shared.setCookie('userinfo', res.userinfo);
                        // 跳转到首页
                        location.href = 'index.html';
                    }
                })
            };
            $('input').focus(function (e) {
                $(e.target).css('box-shadow', '0px 0px 6px 1px #e9e7e7')
            })
            $('input').blur(function (e) {
                $(e.target).css('box-shadow', 'none')
            })
            //点击显示、隐藏密码
            $('.form .eye').click(function () {
                $(this).toggleClass('noEye');
                if ($(this).hasClass('noEye')) {
                    //显示密码
                    flag = true;
                    $(this).siblings('input').attr('type', 'text')
                } else {
                    flag = false;
                    $(this).siblings('input').attr('type', 'password')
                }
            })
            // var win = $(window).width();
            // if (win < window.screen.width) { //宽度
            //     $("body").css("width", window.screen.width);
            //     $("body").css("zoom", win / window.screen.width);
            // } else {
            //     $("body").css("zoom", "normal");
            // }
        })
    </script>
</body>

</html>